<template>
    <div class="PassengerFlow">
        <div class="Flow-item" v-for="(item, index) in list" :key="index">
            <div class="num">
                <span :class="item.isError ? 's error' : 's'">
                    {{ item.num }}
                </span>
                {{ item.util }}
            </div>
            <span class="time">{{ item.time }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
interface listType {
    num: number
    util: string
    time: string
    isError: boolean
}
const props = defineProps({
    list: {
        type: Array<listType>,
        required: true,
        default: [
            {
                num: 612,
                util: '件',
                time: '巡查',
                isError: false
            },
            {
                num: 12,
                util: '件',
                time: '告警',
                isError: true
            }
        ]
    }
})
</script>

<style scoped lang="scss">
.PassengerFlow {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-right: 20px;
    width: 400px;
    color: #ffffff;
    .Flow-item {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 1px solid rgba(255, 255, 255, 0.3);
        width: 167px;
        height: 80px;
        margin-right: 10px;
        background: rgba(255, 255, 255, 0.1);

        .num {
            margin-bottom: 5px;
            font-size: 14px;
            letter-spacing: 1px;

            .s {
                font-family: PangMenZhengDao;
                font-weight: 400;
                font-size: 28px;
                margin-right: 5px;
                color: #009bf1;
            }
            .error {
                color: #ff6c83;
            }
        }
        .time {
            font-size: 15px;
        }
    }
}
</style>
